<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pull order</title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
    
        .header{
            width: 585px;
            margin: 100px auto;
            background-color: gray;
            font-size: 24px;
            color: white;
        }
        .header span{
            display: inline-block;
            
            margin-left: 20px;
            padding: 15px 10px;
        }
        .content{
            width: 525px;
            margin: -98px auto;
            background-color: gray;
            
        }
        .cell{
            width: 110px;
            height: 90px;
            float: left;
            position: relative;
            display: none;
        }
        .cell1{
            left: -10px;
        }
        .cell2{
            left: 135px;
        }
        .cell3{
            left: 280px;
        }
        .cell4{
            left: 423px;
        }
        .cell div{
            margin-top: 8px;
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div class="header">
        <span>公司简介</span>
        <span>产品介绍</span>
        <span>联系我们</span>
        <span>人才招聘</span>
    </div>
    <div class="content">
        <div class="cell cell1">
            <div>概况介绍</div>
            <div>发展历史</div>
            <div>公司实力</div>
        </div>
        <div class="cell cell2">
            <div>软件研发</div>
            <div>软件教育</div>
            <div>天使投资</div>
        </div>
        <div class="cell cell3">
            <div>公司地址</div>
            <div>联系方式</div>
            <div>投资加盟</div>
        </div>
        <div class="cell cell4">
            <div>IOS招聘</div>
            <div>PHP招聘</div>
            <div>HTML招聘</div>
        </div>
        
    </div>
</body>
</html>
<script>
    //找到span 添加事件
    $('.header span').each(function(index){
       $(this).mouseover(function(){
            $(this).css({
                'color':'orange',
                'text-decoration':'underline'
            });
            $(this).siblings().css({
                'color':'white',
                'text-decoration':'none'
            });
            $('.cell').eq(index).css({
                'display':'block',
                'border-left': '1px solid black',
                'border-right': '1px solid black'
            });
            $('.cell').eq(index).siblings().css('display','none');
            $('.cell div').mouseover(function(){

                $(this).css('text-decoration','underline');
            });
            $('.cell div').mouseleave(function(){
                $(this).css('text-decoration','none');
            });
       });

       $(this).mouseleave(function(){
            $(this).css({
                'color':'white',
                'text-decoration':'none'
            });
       });
    });

    $(document).click(function(){
        $('.cell').hide();
    });
</script>